<template>
  <div ref="calendarContainer" class="full-calendar-wrapper">
    <FullCalendar
      ref="fullCalendar"
      :options="calendarOptions"
      class="custom-calendar"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import type { ScheduleResponse } from '@/types/schedule';
import type { CalendarOptions } from '@fullcalendar/core';

interface Props {
  schedules?: ScheduleResponse[];
}

interface Emits {
  (e: 'date-click', date: Date): void;
  (e: 'event-click', schedule: ScheduleResponse): void;
  (e: 'date-select', start: Date, end: Date): void;
}

const props = withDefaults(defineProps<Props>(), {
  schedules: () => []
});

const emit = defineEmits<Emits>();

const fullCalendar = ref();
const calendarContainer = ref();
let resizeObserver: ResizeObserver | null = null;

// 转换日程数据为FullCalendar事件格式
const calendarEvents = computed(() => {
  return props.schedules.map(schedule => ({
    id: schedule.id.toString(),
    title: schedule.title,
    start: schedule.start_time,
    end: schedule.end_time,
    backgroundColor: getPriorityColor(schedule.priority),
    borderColor: getPriorityBorderColor(schedule.priority),
    textColor: '#ffffff',
    extendedProps: {
      schedule: schedule,
      status: schedule.status,
      priority: schedule.priority,
      location: schedule.location,
      description: schedule.description
    }
  }));
});

// 根据优先级获取颜色
const getPriorityColor = (priority: string) => {
  switch (priority) {
    case 'urgent':
      return 'var(--el-color-danger)';
    case 'high':
      return 'var(--el-color-warning)';
    case 'medium':
      return 'var(--el-color-primary)';
    case 'low':
      return 'var(--el-color-info)';
    default:
      return 'var(--el-color-primary)';
  }
};

// 根据优先级获取边框颜色
const getPriorityBorderColor = (priority: string) => {
  switch (priority) {
    case 'urgent':
      return 'var(--el-color-danger-dark-2)';
    case 'high':
      return 'var(--el-color-warning-dark-2)';
    case 'medium':
      return 'var(--el-color-primary-dark-2)';
    case 'low':
      return 'var(--el-color-info-dark-2)';
    default:
      return 'var(--el-color-primary-dark-2)';
  }
};

// 日历配置选项
const calendarOptions: CalendarOptions = {
  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  locale: 'zh-cn',
  firstDay: 1,
  height: '100%',
  events: calendarEvents.value,
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  nowIndicator: true,
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  },
  slotLabelFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  },
  // 点击日期事件
  dateClick: (arg) => {
    emit('date-click', arg.date);
  },
  // 选择日期范围事件
  select: (arg) => {
    emit('date-select', arg.start, arg.end);
  },
  // 点击事件事件
  eventClick: (arg) => {
    const schedule = arg.event.extendedProps.schedule as ScheduleResponse;
    emit('event-click', schedule);
  },
  // 自定义事件内容
  eventContent: (arg) => {
    const schedule = arg.event.extendedProps.schedule as ScheduleResponse;
    const isCompleted = schedule.status === 'completed';
    
    return {
      html: `
        <div class="fc-event-custom ${isCompleted ? 'completed' : ''}">
          <div class="fc-event-time">${arg.timeText}</div>
          <div class="fc-event-title">${arg.event.title}</div>
          ${schedule.location ? `<div class="fc-event-location">📍 ${schedule.location}</div>` : ''}
        </div>
      `
    };
  }
};

// 初始化ResizeObserver监听容器大小变化
onMounted(() => {
  if (calendarContainer.value && typeof ResizeObserver !== 'undefined') {
    resizeObserver = new ResizeObserver(() => {
      const calendarApi = fullCalendar.value?.getApi();
      if (calendarApi) {
        // 延迟一点执行以确保DOM更新完成
        setTimeout(() => {
          calendarApi.updateSize();
        }, 100);
      }
    });
    
    resizeObserver.observe(calendarContainer.value);
  }
});

// 清理ResizeObserver
onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
    resizeObserver = null;
  }
});

// 暴露方法供父组件调用
defineExpose({
  getApi: () => fullCalendar.value?.getApi(),
  changeView: (view: string) => {
    const calendarApi = fullCalendar.value?.getApi();
    if (calendarApi) {
      calendarApi.changeView(view);
    }
  },
  today: () => {
    const calendarApi = fullCalendar.value?.getApi();
    if (calendarApi) {
      calendarApi.today();
    }
  },
  prev: () => {
    const calendarApi = fullCalendar.value?.getApi();
    if (calendarApi) {
      calendarApi.prev();
    }
  },
  next: () => {
    const calendarApi = fullCalendar.value?.getApi();
    if (calendarApi) {
      calendarApi.next();
    }
  }
});
</script>

<style lang="scss" scoped>
.full-calendar-wrapper {
  height: 100%;
  width: 100%;
}

.custom-calendar {
  height: 100%;
  width: 100%;
  
  :deep(.fc) {
    // 全局样式变量
    --fc-border-color: var(--el-border-color-light);
    --fc-page-bg-color: var(--el-bg-color);
    --fc-neutral-text-color: var(--el-text-color-regular);
    --fc-neutral-bg-color: var(--el-bg-color-overlay);
    --fc-highlight-color: var(--el-color-primary-light-9);
    --fc-bg-event-color: var(--el-color-primary);
    --fc-list-event-hover-bg-color: var(--el-bg-color-overlay);
    --fc-event-border-color: var(--el-border-color-light);
    --fc-event-bg-color: var(--el-color-primary);
    --fc-event-text-color: var(--el-color-white);
    --fc-today-bg-color: var(--el-color-primary-light-9);
    
    // 主题背景和边框
    .fc-theme-standard {
      background: var(--el-bg-color);
      border: 1px solid var(--el-border-color-light);
      border-radius: var(--el-border-radius-base);
      box-shadow: var(--el-box-shadow-lighter);
    }
    
    // 头部工具栏 - 完全重构以匹配Element Plus
    .fc-toolbar {
      padding: 16px 20px;
      background: var(--el-bg-color);
      border-bottom: 1px solid var(--el-border-color-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      
      .fc-toolbar-title {
        color: var(--el-text-color-primary);
        font-size: 18px;
        font-weight: 600;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        margin: 0;
      }
      
      .fc-toolbar-chunk {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      // 按钮样式 - 完全匹配Element Plus按钮
      .fc-button {
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color);
        color: var(--el-text-color-primary);
        border-radius: var(--el-border-radius-base);
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        height: 32px;
        line-height: 1;
        white-space: nowrap;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: relative;
        
        &:hover {
          background: var(--el-color-primary-light-9);
          border-color: var(--el-color-primary);
          color: var(--el-color-primary);
          transform: translateY(-1px);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        &:active {
          transform: translateY(0);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        &.fc-button-active {
          background: var(--el-color-primary);
          border-color: var(--el-color-primary);
          color: white;
          box-shadow: 0 2px 4px rgba(var(--el-color-primary-rgb), 0.3);
          
          &:hover {
            background: var(--el-color-primary-light-3);
            border-color: var(--el-color-primary-light-3);
            color: white;
          }
        }
        
        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
          background: var(--el-bg-color);
          border-color: var(--el-border-color-lighter);
          color: var(--el-text-color-placeholder);
          transform: none;
          box-shadow: none;
          
          &:hover {
            background: var(--el-bg-color);
            border-color: var(--el-border-color-lighter);
            color: var(--el-text-color-placeholder);
            transform: none;
            box-shadow: none;
          }
        }
        
        .fc-icon {
          font-size: 14px;
          margin: 0 2px;
        }
        
        &.fc-today-button {
          background: var(--el-color-primary);
          border-color: var(--el-color-primary);
          color: white;
          
          &:hover {
            background: var(--el-color-primary-light-3);
            border-color: var(--el-color-primary-light-3);
            color: white;
          }
          
          &:disabled {
            background: var(--el-bg-color);
            border-color: var(--el-border-color-lighter);
            color: var(--el-text-color-placeholder);
          }
        }
      }
      
      // 按钮组样式
      .fc-button-group {
        display: flex;
        border-radius: var(--el-border-radius-base);
        overflow: hidden;
        border: 1px solid var(--el-border-color);
        
        .fc-button {
          border: none;
          border-radius: 0;
          margin: 0;
          border-right: 1px solid var(--el-border-color);
          
          &:first-child {
            border-top-left-radius: var(--el-border-radius-base);
            border-bottom-left-radius: var(--el-border-radius-base);
            border-right: 1px solid var(--el-border-color);
          }
          
          &:last-child {
            border-top-right-radius: var(--el-border-radius-base);
            border-bottom-right-radius: var(--el-border-radius-base);
            border-right: none;
          }
          
          &:not(:last-child) {
            border-right: 1px solid var(--el-border-color);
          }
        }
      }
    }
    
    // 日网格视图 - 改进视觉效果
    .fc-daygrid {
      .fc-day {
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        transition: all 0.2s ease;
        
        &:hover {
          background: var(--el-bg-color-overlay);
          border-color: var(--el-border-color-light);
        }
        
        &.fc-day-today {
          background: var(--el-color-primary-light-9);
          border-color: var(--el-color-primary-light-7);
          
          .fc-daygrid-day-number {
            color: var(--el-color-primary);
            font-weight: 600;
          }
        }
        
        &.fc-day-other {
          background: var(--el-bg-color-overlay);
          opacity: 0.7;
        }
        
        .fc-daygrid-day-number {
          color: var(--el-text-color-primary);
          font-weight: 500;
          font-size: 14px;
          padding: 8px;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        .fc-daygrid-day-top {
          justify-content: flex-start;
          align-items: center;
          min-height: 28px;
        }
        
        .fc-daygrid-day-events {
          margin-top: 4px;
        }
        
        .fc-daygrid-day-bottom {
          margin-top: 4px;
        }
        
        .fc-daygrid-more-link {
          color: var(--el-color-primary);
          font-size: 12px;
          font-weight: 500;
          padding: 2px 4px;
          border-radius: var(--el-border-radius-small);
          transition: all 0.2s ease;
          
          &:hover {
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
          }
        }
      }
      
      .fc-daygrid-event-harness {
        margin: 1px 2px;
      }
      
      .fc-daygrid-event {
        margin: 1px 2px;
        border-radius: var(--el-border-radius-small);
        font-size: 12px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        border: 1px solid var(--el-border-color-light);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        .fc-event-title {
          padding: 3px 6px;
          font-weight: 500;
          line-height: 1.3;
        }
        
        .fc-event-time {
          padding: 2px 6px;
          font-size: 11px;
          font-weight: 500;
          opacity: 0.9;
        }
      }
    }
    
    // 时间网格视图 - 改进视觉效果
    .fc-timegrid {
      .fc-timegrid-axis {
        background: var(--el-bg-color-overlay);
        border-right: 1px solid var(--el-border-color-light);
        
        .fc-timegrid-slot-label {
          color: var(--el-text-color-regular);
          font-size: 12px;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          padding: 4px 8px;
        }
      }
      
      .fc-timegrid-slots {
        .fc-timegrid-slot {
          border-bottom: 1px solid var(--el-border-color-lighter);
          background: var(--el-bg-color);
          
          &:hover {
            background: var(--el-bg-color-overlay);
          }
        }
      }
      
      .fc-timegrid-event {
        border-radius: var(--el-border-radius-small);
        margin: 1px 2px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        border: 1px solid var(--el-border-color-light);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        .fc-event-main {
          padding: 2px 4px;
        }
        
        .fc-event-time {
          font-size: 11px;
          font-weight: 500;
        }
        
        .fc-event-title {
          font-size: 12px;
          font-weight: 500;
          line-height: 1.3;
        }
      }
      
      .fc-timegrid-now-indicator-line {
        border-color: var(--el-color-danger);
        border-width: 2px;
      }
      
      .fc-timegrid-now-indicator-arrow {
        border-top-color: var(--el-color-danger);
      }
    }
    
    // 列表视图 - 改进视觉效果
    .fc-list {
      background: var(--el-bg-color);
      
      .fc-list-day {
        background: var(--el-bg-color-overlay);
        border-bottom: 1px solid var(--el-border-color-light);
        padding: 12px 16px;
        
        .fc-list-day-text {
          color: var(--el-text-color-primary);
          font-weight: 600;
          font-size: 14px;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        .fc-list-day-side-text {
          color: var(--el-text-color-secondary);
          font-size: 12px;
        }
      }
      
      .fc-list-event {
        border-bottom: 1px solid var(--el-border-color-lighter);
        padding: 12px 16px;
        transition: all 0.2s ease;
        
        &:hover {
          background: var(--el-bg-color-overlay);
          border-color: var(--el-border-color-light);
        }
        
        .fc-list-event-title {
          color: var(--el-text-color-primary);
          font-weight: 500;
          font-size: 14px;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          margin-bottom: 4px;
        }
        
        .fc-list-event-time {
          color: var(--el-text-color-secondary);
          font-size: 12px;
          font-weight: 500;
        }
        
        .fc-list-event-graphic {
          color: var(--el-color-primary);
        }
      }
      
      .fc-list-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }
    }
    
    // 弹出窗口 - 改进视觉效果
    .fc-popover {
      background: var(--el-bg-color);
      border: 1px solid var(--el-border-color-light);
      border-radius: var(--el-border-radius-base);
      box-shadow: var(--el-box-shadow-light);
      min-width: 200px;
      max-width: 350px;
      
      .fc-popover-header {
        background: var(--el-bg-color-overlay);
        border-bottom: 1px solid var(--el-border-color-light);
        color: var(--el-text-color-primary);
        padding: 12px 16px;
        font-weight: 600;
        font-size: 14px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
      }
      
      .fc-popover-body {
        background: var(--el-bg-color);
        padding: 8px;
        
        .fc-event {
          margin: 4px 0;
          border-radius: var(--el-border-radius-small);
          padding: 6px 8px;
          font-size: 12px;
          transition: all 0.2s ease;
          
          &:hover {
            background: var(--el-bg-color-overlay);
          }
        }
      }
    }
    
    // 滚动条样式
    .fc-scroller {
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: var(--el-bg-color-overlay);
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: var(--el-border-color-darker);
        border-radius: 3px;
        
        &:hover {
          background: var(--el-border-color-dark);
        }
      }
    }
  }
}

// 自定义事件样式 - 改进视觉效果
:deep(.fc-event-custom) {
  padding: 4px 6px;
  border-radius: var(--el-border-radius-small);
  border: 1px solid var(--el-border-color-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
  
  &.completed {
    opacity: 0.6;
    text-decoration: line-through;
    background: var(--el-bg-color-overlay) !important;
    color: var(--el-text-color-secondary) !important;
  }
  
  .fc-event-time {
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 2px;
    opacity: 0.9;
  }
  
  .fc-event-title {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
  }
  
  .fc-event-location {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
    font-weight: 400;
  }
}

// 响应式设计 - 改进移动端体验
@media (max-width: 768px) {
  .custom-calendar {
    :deep(.fc-toolbar) {
      flex-direction: column;
      gap: 12px;
      padding: 12px 16px;
      
      .fc-toolbar-title {
        font-size: 16px;
      }
      
      .fc-toolbar-chunk {
        width: 100%;
        justify-content: center;
      }
      
      .fc-button {
        padding: 6px 12px;
        font-size: 12px;
        height: 28px;
      }
      
      .fc-button-group {
        .fc-button {
          padding: 6px 12px;
          font-size: 12px;
        }
      }
    }
    
    :deep(.fc-daygrid) {
      .fc-day {
        .fc-daygrid-day-number {
          font-size: 12px;
          padding: 6px;
        }
        
        .fc-daygrid-event {
          font-size: 11px;
          
          .fc-event-title {
            font-size: 11px;
          }
          
          .fc-event-time {
            font-size: 10px;
          }
        }
      }
    }
    
    :deep(.fc-timegrid) {
      .fc-timegrid-axis {
        .fc-timegrid-slot-label {
          font-size: 11px;
          padding: 2px 4px;
        }
      }
      
      .fc-timegrid-event {
        .fc-event-main {
          padding: 1px 2px;
        }
        
        .fc-event-time {
          font-size: 10px;
        }
        
        .fc-event-title {
          font-size: 11px;
        }
      }
    }
    
    :deep(.fc-list) {
      .fc-list-day {
        padding: 8px 12px;
        
        .fc-list-day-text {
          font-size: 12px;
        }
        
        .fc-list-day-side-text {
          font-size: 11px;
        }
      }
      
      .fc-list-event {
        padding: 8px 12px;
        
        .fc-list-event-title {
          font-size: 12px;
        }
        
        .fc-list-event-time {
          font-size: 11px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .custom-calendar {
    :deep(.fc-toolbar) {
      .fc-toolbar-title {
        font-size: 14px;
      }
      
      .fc-button {
        padding: 4px 8px;
        font-size: 11px;
        height: 24px;
      }
      
      .fc-button-group {
        .fc-button {
          padding: 4px 8px;
          font-size: 11px;
        }
      }
    }
    
    :deep(.fc-daygrid) {
      .fc-day {
        .fc-daygrid-day-number {
          font-size: 11px;
          padding: 4px;
        }
        
        .fc-daygrid-event {
          margin: 1px;
          font-size: 10px;
          
          .fc-event-title {
            font-size: 10px;
          }
          
          .fc-event-time {
            font-size: 9px;
          }
        }
      }
    }
  }
}
</style>